<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta th:include="common/commons :: layui"/>
    <script th:src="@{/js/accountManage.js}"></script>
    <style type="text/css">
        .layui-form-pane .layui-form-label {
            width: 150px;
        }

        .layui-form-pane .layui-input-block {
            margin-left: 150px;
        }
    </style>
</head>
<body>

<div class="layui-row">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>
            <span>全局管理</span> <span>></span> <strong>账号管理</strong>
        </legend>
    </fieldset>
</div>
<div class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" id="name"/>
        </div>
        <div class="layui-input-inline">
            <input class="layui-btn layui-btn-normal  " type="button" id="search" value="查询" onclick="query()"/>
            <input class="layui-btn layui-btn-normal  " type="button" id="clear" value="清空" onclick="clean()"/>
        </div>
    </div>
</div>
<div class="layui-row">
    <table id="accountManageTable" lay-filter="accountManageFilter"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addNew">新增</button>
    </div>
</script>
<script type="text/html" id="barDemo">
<!--    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="boundWx">绑定微信用户</a>-->
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editAccountManage">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="delAccountManage">删除</a>
</script>
<!-- 新增 -->
<div id="addNewDiv" hidden="hidden" style="text-align:center">
    <div class="layui-fluid" style="margin-top: 20px">
        <form id="insert" class="layui-form layui-form-pane" th:action="@{/user/add}"
              method="post">
            <div class="layui-form-item ">
                <label class="layui-form-label">所属小区</label>
                <div class="layui-input-block">
                    <select name="communityId" style="text-align:center;">
                        <option th:each="pro:${community}" th:value="${pro.id}"
                                th:text="${pro.name}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="userName" required="required"/>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="password" required="required"/>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="realName" required="required"/>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="phone" required="required"/>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin:0 auto">
                    <button class="layui-btn" type="submit">确定</button>
                </div>
            </div>
        </form>
        <script>
            layui.use('form', function () {
                var form = layui.form;
                //各种基于事件的操作，下面会有进一步介绍
                $("#insert").ajaxForm(function (success) {
                    if (success.code == 200) {
                        msg.success('新增成功', function () {
                            parent.window.location.reload();
                        });
                    } else {
                        msg.error('新增失败')
                    }
                })
            });
        </script>
    </div>
</div>
</body>
</html>